<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../bulma.css"/>
	</head>
		
	<body>
		<div id="root">
			<!-- 头部 -->
			<section class="hero is-dark">
			      <div class="hero-body">
			        <div class="container">
			          <p class="title">
			            Dark title
			          </p>
			          <p class="subtitle">
			            Dark subtitle
			          </p>
			        </div>
			      </div>
			    </section>
				
			<!-- 列表 -->
				<!-- //居中 -->
				<div class="container mt-3 ">
					 <div class="columns is-centered">
						 <div class="column is-one-quarter ">
					
							<input 
								class="input" 
								type="text" 
								placeholder="请输入事件" 
								v-model="todoText"
								@keyup.enter="hendleAddTodo"
							>
							
						</div>
						
						 <div class="column is-one-quarter">
							<button class="button is-dark" @click="hendleAddTodo()">添加</button>
						</div>
					 </div>
				</div>
				<div class="container">
					<div class="columns is-multiline">
					 <div class="column is-one-quarter" v-for="todo in todos" >
						<div class="card">
						  <header class="card-header">
						    <p class="card-header-title">
						      事件
						    </p>
						    <a href="#" class="card-header-icon" aria-label="more options">
						      <span class="icon" @click="handleDeltodo(todo.id)">
						        <i class="delete"></i>
						      </span>
						    </a>
						  </header>
						  <div class="card-content">
						    <div class="content">
						     {{todo.title}}
						      <br>
						      <time datetime="2016-1-1">{{Date.now()}}</time>
						    </div>
						  </div>
						  <footer class="card-footer">
						    <a href="#" :class="['card-footer-item ',todo.hasFinish?'has-text-success':'has-text-danger']">{{todo.hasFinish? '已':'未'}}完成</a>
						    <a 
								href="#" 
								class="card-footer-item"
								@click="hendleTogFinish(todo.id)"
							>
								切换为{{todo.hasFinish? '未':'已'}}完成
							</a>
						    
						  </footer>
						</div>
					  </div>
					
				  </div>
				</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#root',
				data:{
					todos:[
						{id:1,title:'吃饭',hasFinish:true},
						{id:2,title:'睡觉',hasFinish:false},
						{id:3,title:'打豆豆',hasFinish:true}
					],
					todoText:''
				},
				methods:{
					// 改变已完成未完成按钮的方法
					hendleTogFinish(id){
					this.todos	=this.todos.map(todo=>{
						if(todo.id===id) todo.hasFinish=!todo.hasFinish
						return todo
						})
					},
					//删除列表
					handleDeltodo(id){
						this.todos=this.todos.filter(todo=>todo.id!=id)
					},
					//添加一条todo
					hendleAddTodo(){
						if(this.todoText==='') return
						this.todos.push({
							id:Date.now(),
							title:this.todoText,
							hasFinish:false
						})
						//把input清空，数据的双向绑定
						this.todoText=''
					}
						
				}
			})
		</script>
	</body>
</html>
